<template>
  <div>
    <main role="main">
      <section class="jumbotron text-center">
        <div class="container">
          <h1>JC在线视频平台</h1>
          <p class="lead text-muted m-3">
            知识付费时代刚刚起步，在这个领域有很多的发展机会。
          </p>
          <p>
            <router-link to="/list" class="btn btn-primary my-2 p-3 font-weight-bold">查看所有视频</router-link>
          </p>
        </div>
      </section>

      <div class="album py-5 bg-light">
        <div class="container">
          <div class="title1">最新上线</div>
          <div class="row">
            <div v-for="o in news" class="col-md-4">
              <the-course v-bind:course="o"></the-course>
            </div>


          </div>
        </div>

        <div class="container">
          <div class="title2">好课推荐</div>
          <div class="row">
            <div v-for="o in news" class="col-md-4">
              <the-course v-bind:course="o"></the-course>
            </div>


          </div>
        </div>
      </div>

    </main>

  </div>
</template>

<style scoped>
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
   .title1{
     margin-bottom: 2rem;
     color: #fafafa;
     letter-spacing: 0;
     text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
     font-size: 2rem;
   }
  .title2{
    margin-bottom: 2rem;
    color: transparent;
    -webkit-text-stroke: 1px black;
    letter-spacing: 0.04em;
    font-size: 2rem;
  }
</style>

<script>
// @ is an alias to /src
import axios from 'axios';
import {defineComponent, onMounted, ref} from 'vue';
import router from "@/router";
import TheCourse from "../components/the-course";

export default {
  name: 'Index',
  components: {
    TheCourse
  },
  setup(){
    const news=ref({});

    //查询新上好课,高频访问，低频修改适合用缓存。
    const listNew=()=>{
      //判断是否有缓存
      let news1=SessionStorage.get("news");
      if(!Tool.isEmpty(news1)){
        news.value=news1;
        return;
      }
      axios.get("/business/web/course/list-new").then((response)=>{
        const data=response.data;
        if(data.success){
          news.value=data.content;
          //放入缓存
          SessionStorage.set("news",news.value);
        }else{
          console.log(data.message);
        }
      })
    }

    onMounted(()=>{
      listNew();
    });

    return{
      news
    }


  }
}
</script>
